// 列表

import ContextData from "./store/contextTodo"; //公共数据
import { Button } from 'antd';
import { useState, useContext } from "react";

const Conlist2 = () => {

  const context = useContext(ContextData)

  const [use, setuse] = useState(context)


  // //单删
  let del = (index) => {
    // console.log(index);
    context.list.splice(index, 1)
    setuse({
      ...use, context
    })
  }

  // 批删
  let delAll = () => {
    context.list.length = 0
    setuse({
      ...use, context
    })
  }

  return (
    <div>

      {
        context.list.length ? context.list.map((item, index) => {
          // console.log(item);
          return (
            <div key={index}>
              <li className="lfdi">

                {/* 数据 */}
                <span>{item.time}</span>
                <span>{item.name}</span>
                <span
                  className={[item.priority === 1 ? 'classA' : '' || item.priority === 2 ? 'classB' : '' ||
                    item.priority === 3 ? 'classC' : '' || item.priority === 4 ? 'classD' : '']}
                >
                  {item.priority}
                </span>

                {/* 单删 */}
                <span onClick={() => del(index)}>X</span>

              </li>
            </div>
          )
        }) : <h2 className="h">暂无数据</h2>
      }

      {/* 全删 */}
      <Button className="buttmasd" type="primary" onClick={delAll}>清除</Button>

    </div>
  )

}

export default Conlist2